<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
<title>陈嘉乐个人简介</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
<script type="text/javascript" src="./js/Chart.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/all.js" ></script>
</head>
<body>
<!-- 代码部分begin -->
<section class="strips">
	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Lorem">PHP作品</h1>
			<div class="strip__inner-text">
				<div class="img_box img_box01 animated bounceInDown">
					<div class="img php_img01"></div>
					<div class="info info_white info01">
						作品名称：<span>家具电商网站</span>
						<br />
						用时：<span>一个半月</span>
						<br />
						使用框架：<span>HD框架</span>
						<br />
						服务器环境：<span>LAMP</span>
						<br />
						功能模块：<span>①QQ账号扫码登录②用户注册登录③商品筛选④购买商品⑤个人中心</span>
						<br />
						作品说明：<span>前端界面仿fnji官网，加入了商品筛选功能和QQ扫码功能。购物后直接点支付便完成订单，可在个人中心查看。</span>
						<br />
						<a href="../fnji/index.php" target="_blank" target="_blank" class="botton botton01 botton_white">前往该网页</a>
						<a href="javascript:;" class="botton botton02 php_botton02 botton_white">返回</a>
					</div>
				</div>
				<div class="img_box img_box02 animated bounceInDown">
					<div class="img php_img02"></div>
					<div class="info info_white info02">
						作品名称：<span>萤火虫许愿墙</span>
						<br />
						用时：<span>4天</span>
						<br />
						使用框架：<span>HD框架</span>
						<br />
						服务器环境：<span>LAMP</span>
						<br />
						功能：<span>许愿后，愿望会变成一只萤火虫</span>
						<br />
						作品说明：<span>使用多运动为每只“萤火虫”添加一个随机运动事件，添加的愿望会变成一只萤火虫跟随其他萤火虫围绕光源飞行，该作品已上线。</span>
						<br />
						<a href="" target="_blank" class="botton botton01 botton_white">前往该网页</a>
						<a href="javascript:;" class="botton botton02 php_botton02 botton_white">返回</a>
					</div>
				</div>
				<!--<div class="img_box img_box03 animated bounceInDown">
					<div class="img php_img03"></div>
					<div class="info info_white info03">
						作品名称：<span></span>
						<br />
						用时：<span></span>
						<br />
						使用框架：<span></span>
						<br />
						服务器环境：<span></span>
						<br />
						功能：<span></span>
						<br />
						作品说明：<span></span>
						<br />
						<a href="" target="_blank" class="botton botton01 botton_white">前往该网页</a>
						<a href="javascript:;" class="botton botton02 php_botton02 botton_white">返回</a>
					</div>
				</div>-->
				<!--<div class="img_box img_box04 animated bounceInDown">
					<div class="img info_white php_img04"></div>
					<div class="info info04">
						作品名称：<span></span>
						<br />
						用时：<span></span>
						<br />
						使用框架：<span></span>
						<br />
						服务器环境：<span></span>
						<br />
						功能：<span></span>
						<br />
						作品说明：<span></span>
						<br />
						<a href="" target="_blank" class="botton botton01 botton_white">前往该网页</a>
						<a href="javascript:;" class="botton botton02 php_botton02 botton_white">返回</a>
					</div>
				</div>-->
			</div>
		</div>
	</article>


	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Dolor">自我介绍</h1>
			<div class="strip__inner-text">
				<div id="preson_info">
					<div id="preson_info_top">
						<div id="info_img"></div>
						<div id="info_text01">
							<span class="iconf ">
								<i class="iconfont" style="font-weight: 700;">&#xe704;</i>
								<p>交友</p>
							</span>
							<span class="iconf">
								<i class="iconfont">&#xe651;</i>
								<p>音乐</p>
							</span>
							<span class="iconf">
								<i class="iconfont">&#xe673;</i>
								<p>游泳</p>
							</span>
							<span class="iconf">
								<i class="iconfont" style="font-weight: 700;">&#xe6fb;</i>
								<p>单车</p>
							</span>
							<span class="iconf">
								<i class="iconfont">&#xe60e;</i>
								<p>科幻</p>
							</span>
							<span class="iconf">
								<i class="iconfont">&#xe63f;</i>
								<p>IT</p>
							</span>
							<span class="iconf">
								<i class="iconfont">&#xe604;</i>
								<p>羽毛球</p>
							</span>
						</div>
					</div>
					<div id="preson_info_bottom">
						<div id="info_bottom_title01" class="animated bounceInLeft">基本信息</div>
						<div id="info_bottom_text">
							<div class="row animated bounceInLeft">
								<span class="text_title">姓&nbsp;&nbsp;名：</span><span class="text">陈嘉乐</span>
							</div>
							<div class="row animated bounceInLeft">
								<span class="text_title">出生年月：</span><span class="text">1991/12/07</span>
							</div>
							<div class="row animated bounceInLeft">
								<span class="text_title">毕业院校：</span><span class="text">广东科学技术职业学院</span>
							</div>
							<div class="row animated bounceInLeft">
								<span class="text_title">专&nbsp;&nbsp;业：</span><span class="text">计算机网络技术</span>
							</div>
							<div class="row animated bounceInLeft">
								<span class="text_title">学&nbsp;&nbsp;历：</span><span class="text">大专</span>
							</div>
							<div class="row animated bounceInLeft">
								<span class="text_title">工作经验：</span><span class="text">2年</span>
							</div>
							<div class="row animated bounceInLeft">
								<span class="text_title">邮&nbsp;&nbsp;箱：</span><span class="text">383295678@qq.com</span>
							</div>
							<div class="row animated bounceInLeft">
								<span class="text_title">电&nbsp;&nbsp;话：</span><span class="text">15989769523</span>
							</div>
							<div class="row animated bounceInLeft">
								<span class="text_title">联系我：</span><span class="text"><img src="./images/my.jpg" height="120px"/></span>
							</div>
						</div>
					</div>
				</div>
				<div id="preson_info_right">
					<div id="chart_box" class="animated bounceIn">
						<div id="char">
							<canvas id="chart"></canvas>
						</div>
					</div>
					<div id="info_bottom_title02" class="animated bounceInLeft">专业技能</div>
					<div id="skill" class="animated bounceIn">
						1.精通LAMP、WAMP环境下的PHP开发，可独立开发电商项目，熟练掌握Ajax技术应用。掌握LNMP环境下的PHP开发。
						<br />
						2.掌握支付宝API调用、QQ登陆API调用、微信API调用。
						<br />
						3.精通HD框架，独立开发过一个简单的PHP框架，对MVC架构有深刻理解。
						<br />
						4.熟练掌握mysql的优化原理、掌握Memcache技术、提高网站访问速度。
						<br />
						5.熟练掌握前端布局、原生javascript，熟练使用jQ，掌握Smarty模板引擎原理。
					</div>
				</div>
			</div>	
		</div>
	</article>
  
  
	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Sit">HTML作品</h1>
			<div class="strip__inner-text">
				<div class="img_box img_box01 animated bounceInDown">
					<div class="img html_img01"></div>
					<div class="info info01">
						作品名称：<span>仿天牧莱首页</span>
						<br />
						用时：<span>7个小时</span>
						<br />
						使用库：<span>无</span>
						<br />
						功能：<span>纯前端静态页面，主要练习前端布局技能</span>
						<br />
						作品说明：<span>该页面主要特点是多处使用背景图定位功能做出模特换装的展示效果</span>
						<br />
						<a href="../tml/index.html" target="_blank" class="botton botton01">前往该网页</a>
						<a href="javascript:;" class="botton botton02 html_botton02">返回</a>
					</div>
				</div>
				<div class="img_box img_box02 animated bounceInDown">
					<div class="img html_img02"></div>
					<div class="info info02">
						作品名称：<span>仿怪物猎人首页</span>
						<br />
						用时：<span>两天</span>
						<br />
						使用库：<span>jQuery、animate.css</span>
						<br />
						功能：<span>纯前端静态页面，主要练习前端布局技能、jq效果添加、animate.css调用</span>
						<br />
						作品说明：<span>独立完成所有前端布局代码和jq动态代码开发，与官网不同的是在标题和左侧边栏处调用了animate特效，底部“怪物猎人历史”修改了颜色，且拖动效果为自己编写的算法。</span>
						<br />
						<a href="../gwlr/index.html" target="_blank" class="botton botton01">前往该网页</a>
						<a href="javascript:;" class="botton botton02 html_botton02">返回</a>
					</div>
				</div>
				<div class="img_box img_box03 animated bounceInDown">
					<div class="img html_img03"></div>
					<div class="info info03">
						作品名称：<span>仿天猫商城首页</span>
						<br />
						用时：<span>四天</span>
						<br />
						使用库：<span>jQuery、animate.css</span>
						<br />
						功能：<span>纯前端静态页面，主要练习前端布局技能、jq效果添加、animate.css调用</span>
						<br />
						作品说明：<span>独立完成所有前端布局代码和jq动态代码开发，与官网不同的是添加了其他的动态特效，如图片浮动特效、点击图片暗化其他同类图片、点击商品图放大、商标多运动闪烁。</span>
						<br />
						<a href="../tm/index.html" target="_blank" class="botton botton01">前往该网页</a>
						<a href="javascript:;" class="botton botton02 html_botton02">返回</a>
					</div>
				</div>
				<div class="img_box img_box04 animated bounceInDown">
					<div class="img html_img04"></div>
					<div class="info info04">
						作品名称：<span>仿凡客首页作品</span>
						<br />
						用时：<span>两天</span>
						<br />
						使用库：<span>无</span>
						<br />
						功能：<span>存静态页面</span>
						<br />
						作品说明：<span>第一个html作品，没有使用任何javascript特效，唯一的下拉框效果是用hover实现。</span>
						<br />
						<a href="../fk/index.html" target="_blank" class="botton botton01">前往该网页</a>
						<a href="javascript:;" class="botton botton02 html_botton02">返回</a>
					</div>
				</div>
			</div>
		</div>
	</article>
  
  
	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Amet">小游戏</h1>
			<div class="strip__inner-text">
				
								
			</div>	
		</div>
	</article>
	
	<i class="iconfont fa fa-close strip__close">&#xe786;</i>
	
</section>


<script>

var chart = document.getElementById("chart");


var data = {
    labels: ["PHP","JS/JQ","HTML","NETWORK","Linux","Mysql"],
    datasets: [
        {
        	pointBackgroundColor:'black',
            label: "技能",
            backgroundColor: "rgba(252,190,69,0.6)",
            borderColor: "rgba(234,158,10,1)",
            pointBackgroundColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(255,99,132,1)",
            data: [92, 80, 90, 85, 65, 70]
        }
    ]
};

new Chart(chart, {
    type: "radar",
    data: data,
    options: {
        scale: {
            reverse: false,
            ticks: {
                beginAtZero: true
            }
        }
    }
});



var Expand = function () {
	var tile = $('.strips__strip');
	var tileLink = $('.strips__strip > .strip__content');
	var tileText = tileLink.find('.strip__inner-text');
	var stripClose = $('.strip__close');
	var expanded = false;
	var open = function () {
		var index = $(this).index('.strip__content');
		if(index==3){
			alert('待开放');
			return;
		}
		var tile = $(this).parent();
		if (!expanded) {
			tile.addClass('strips__strip--expanded');
			tileText.css({display:'block',transition:'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)'});
			stripClose.addClass('strip__close--show');
			stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
			expanded = true;
		}
	};
	var close = function () {
		if (expanded) {
			tile.removeClass('strips__strip--expanded');
			tileText.css({display:'none',transition:'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)'});
			stripClose.removeClass('strip__close--show');
			stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
			expanded = false;
		}
	};
	var bindActions = function () {
		tileLink.on('click', open);
		stripClose.on('click', close);
	};
	var init = function () {
		bindActions();
	};
	return { init: init };
}();
Expand.init();
</script>
<!-- 代码部分end -->

</body>
</html>